<template>
  <view class="set">
    <!--pages/my/set.wxml-->
    <view class="loading">
      <van-loading v-if="loading" size="24px" color="#1989fa" :vertical="true" type="spinner">提交中...</van-loading>
    </view>
    <form @submit="formSubmit" bindreset="formReset">
      <view class="set-box">
        <view class="set-box1">
          <text class="set-tex1">姓名</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入您的姓名"
            name="name"
            :value="userinfo.name"
            @input="formModel('name',$event)"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">性别</text>
          <radio-group class="radio-group" name="sex">
            <label class="set-radio"> <radio value="1" :checked="userinfo.sex == 1 ? true : false" />男 </label>
            <label class="set-radio"> <radio value="2" :checked="userinfo.sex == 2 ? true : false" />女 </label>
          </radio-group>
        </view>
        <view class="set-box1">
          <text class="set-tex1">身高</text>
          <input type="text" class="set-inp" placeholder="输入身高，如：168cm" name="tall" :value="userinfo.tall"  @input="formModel('tall',$event)" />
        </view>

        <view class="set-box1">
          <text class="set-tex1">婚姻</text>
          <radio-group class="radio-group" name="hunyin">
            <label class="set-radio"> <radio value="3" :checked="userinfo.hunyin == 3" />未婚 </label>
            <label class="set-radio"> <radio value="4" :checked="userinfo.hunyin == 4" />已婚 </label>
          </radio-group>
        </view>

        <view class="set-box1">
          <text class="set-tex1">身份证号码</text>
          <input type="text" class="set-inp" placeholder="输入您的身份证号" name="idcard" :value="userinfo.idcard"  @input="formModel('idcard',$event)" />
        </view>

        <view class="set-box1">
          <text class="set-tex1">手机号码</text>
          <input type="text" class="set-inp" placeholder="输入您的手机号" name="telphone" :value="userinfo.telphone"  @input="formModel('telphone',$event)" />
        </view>

        <view class="set-box1">
          <text class="set-tex1">银行卡号</text>
          <input type="text" class="set-inp" placeholder="输入银行卡号" name="bankcard" :value="userinfo.bankcard"   @input="formModel('bankcard',$event)"/>
        </view>

        <view class="set-box1">
          <text class="set-tex1">开户银行</text>
          <input type="text" class="set-inp" placeholder="输入开户银行" name="bankname" :value="userinfo.bankname"   @input="formModel('bankname',$event)"/>
        </view>

        <view class="set-box1">
          <text class="set-tex1">开户行地址</text>
          <input
            type="text"
            class="set-inp"
            placeholder="开户行地址"
            name="bank_address"
            :value="userinfo.bank_address"
            @input="formModel('bank_address',$event)"
            
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">家庭现在住址</text>
          <input type="text" class="set-inp" placeholder="输入家庭现在住址" name="address" :value="userinfo.address" @input="formModel('address',$event)" />
        </view>

        <view class="set-box1">
          <text class="set-tex1">党/团员</text>
          <input
            type="text"
            class="set-inp"
            placeholder="输入党员或团员或群众"
            name="dangtuan"
            :value="userinfo.dangtuan"
            @input="formModel('dangtuan',$event)"
          />
        </view>

        <view class="set-box1">
          <text class="set-tex1">民族</text>
          <input type="text" class="set-inp" placeholder="输入民族：如汉族" name="minzu" :value="userinfo.minzu" @input="formModel('minzu',$event)"/>

        </view>

        <view class="set-box1">
          <text class="set-tex1">出生年月</text>
          <picker mode="date" :value="date" start="1900-01-01" end="2077-09-01" @change="bindDateChange">
            <view class="picker" v-if="birthday">{{ birthday }}</view>
            <view class="picker" v-else>请选择出生年月</view>
          </picker>
        </view>

        <view class="set-box1">
          <text class="set-tex1">籍贯</text>
          <picker mode="region" @change="bindRegionChange" :value="region">
            <view class="picker" v-if="region[0]">{{ region[0] }} {{ region[1] ? region[1] : '' }} </view>
            <view class="picker" v-else>请选择地区</view>
          </picker>
        </view>

        <view class="set-box1">
          <text class="set-tex1">户口所在地</text>
          <picker mode="region" @change="bindRegionChangehk" :value="region">
            <!--   <view class="picker" v-if="{{regionhk[0]}}">{{regionhk[0]}} {{regionhk[1]?regionhk[1]:''}} {{regionhk[2]?regionhk[2]:''}}</view>-->
            <view class="picker" v-if="regionhk[0]">{{ regionhk[0] }} {{ regionhk[1] ? regionhk[1] : '' }} </view>

            <view class="picker" v-else>请选择地区</view>
          </picker>
        </view>

        <view class="set-box1">
          <text class="set-tex1">学历</text>
          <picker @change="bindPickerChange" :value="index" :range="array">
            <!--   <view class="picker" v-if="{{regionhk[0]}}">{{regionhk[0]}} {{regionhk[1]?regionhk[1]:''}} {{regionhk[2]?regionhk[2]:''}}</view>-->

            <view class="picker" v-if="array[index]">{{ array[index] }} </view>

            <view class="picker" v-else>请选择学历</view>
          </picker>
        </view>

        <view class="set-box1">
          <text class="set-tex1">毕业院校</text>
          <input type="text" class="set-inp" placeholder="输入学校名称" name="xuexiao" :value="userinfo.xuexiao" @input="formModel('xuexiao',$event)"/>
        </view>

        <view class="set-box1">
          <text class="set-tex1">所学专业</text>
          <input type="text" class="set-inp" placeholder="输入学所学专业" name="zhuanye" :value="userinfo.zhuanye" @input="formModel('zhuanye',$event)" />
        </view>

        <view class="set-box1">
          <text class="set-tex1">毕业时间</text>
          <input type="text" class="set-inp" placeholder="输入毕业时间" name="bysj" :value="userinfo.bysj"  @input="formModel('bysj',$event)"/>
        </view>

        <view class="set-box1">
          <text class="set-tex1">是否缴过社保</text>
          <radio-group class="radio-group" name="shebao">
            <label class="set-radio"> <radio value="0" :checked="userinfo.shebao == 0 ? true : false" />否 </label>
            <label class="set-radio"> <radio value="1" :checked="userinfo.shebao == 1 ? true : false" />是 </label>
          </radio-group>
        </view>

        <view class="set-box1">
          <text class="set-tex1">是否缴过公积金</text>
          <radio-group class="radio-group" name="gjj">
            <label class="set-radio"> <radio value="0" :checked="userinfo.gjj == 0 ? true : false" />否 </label>
            <label class="set-radio"> <radio value="1" :checked="userinfo.gjj == 1 ? true : false" />是 </label>
          </radio-group>
        </view>

        <view class="set-box1" style="display: none">
          <text class="set-tex1">上传相片</text>
          <view @tap="uppic" class="flex-grow-1">
            <view class="flex flex-row" style="height: 100%; padding: 0">
              <view class="flex-grow-1 flex-y-center">
                <view>
                  <image :src="pic" style="height: 80rpx; width: 80rpx"></image>
                </view>
                <view style="color: #aaaaaa">请上传照片</view>
                <input name="pic" style="display: none" :value="pic" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!--已提交过不可编辑-->
      <!-- <button class="set-btn" formType="submit" :disabled="userinfo.status == 3 ? true : false">提交信息</button> -->
      <button class="set-btn" formType="submit">提交信息</button>

      <!--<button class='set-btn' formType="submit">提交信息</button>-->
    </form>
    <view class="index-swiper">
      <ad unit-id="adunit-b162728fa0cbed65"></ad>
    </view>
  </view>
</template>


<script>
import Taro from '@tarojs/taro';
import { submit } from '@api/set';
import Toast from '@components/vant/toast/toast';
export default {
  data() {
    return {
      loading: false,
      userinfo: [],
      region: [],
      regionhk: '',
      uppic: '',
      pic: '',
      index: 0,
      birthday: '',
      date: '',
      array: ['小学', '硕士', '博士', '大专', '中专', '高中', '初中', '本科', '其他学历'],
      // array: [{1:'本科'}, {2:'硕士'}],
      objectArray: [
        {
          id: 0,
          name: '美国',
        },
        {
          id: 1,
          name: '中国',
        },
        {
          id: 2,
          name: '巴西',
        },
        {
          id: 3,
          name: '日本',
        },
      ],
      gsid: 0,
    };
  },
  created() {
   
    var that = this;
    //获取本地sessinid
    var session_id = Taro.getStorageSync('session_id');

    //获取扫码进入id
    var gsid = Taro.getStorageSync('gsid');

    this.gsid = Taro.getStorageSync('gsid');

    if (session_id.length < 1) {
      Taro.showModal({
        title: '提示',
        content: '需要授权登录后操作',
        success(res) {
          if (res.confirm) {
            Taro.navigateTo({
              url: '/pages/login/index',
            });

            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
             Taro.navigateBack({
             delta: 2
          });
          }
        },
      });
    }

    this.$reguser('', function () {
      //app.loadding();

      that.$getuserinfo(function (data) {
        console.log(data, '.................表单数据....................');
        that.userinfo = data.data;
        that.region = [data.data.province, data.data.city, data.data.area];
        that.regionhk = [data.data.hkprovince, data.data.hkcity, data.data.hkarea];
        that.birthday = data.data.birthday;
        that.index = data.data.xueli;
      });
    });
  },
  methods: {
    formModel(name,e) {
      console.log(name,e)
      this.userinfo[name] = e.detail.value;
    },
    formSubmit: function (e) {
      var formdata = e.detail.value;
      formdata.birthday = this.birthday;
      formdata.province = this.region[0];
      formdata.city = this.region[1];
      formdata.area = this.region[2];
      formdata.hkprovince = this.regionhk[0];
      formdata.hkcity = this.regionhk[1];
      formdata.hkarea = this.regionhk[2];
      formdata.xueli = this.index;
      formdata.gsid = Taro.getStorageSync('gsid');
      formdata.jtid = Taro.getStorageSync('jtid');
      console.log(formdata);
      this.loading = true;
      submit({ formdata: formdata }).then((res) => {
        if (!res.code) {
          this.loading = false;
          Taro.showToast({
            icon: 'none',
            title: '提交成功',
            duration: 2000,
          });
          setTimeout(() => {
            Taro.navigateBack({
              delta: 2,
            });
          }, 2000);
        }
      });
    },
    bindPickerChange(e) {
      console.log('picker发送选择改变，携带值为', e.detail.value);

      this.index = e.detail.value;
    },

    bindRegionChange(e) {
      this.region = e.detail.value;
    },

    bindRegionChangejg(e) {
      this.regionjg = e.detail.value;
    },

    bindRegionChangehk(e) {
      this.regionhk = e.detail.value;
    },
    bindDateChange(e) {
      this.birthday = e.detail.value;
    },
  },
};
</script>

<style >
/* pages/my/set.wxss */
page {
  background: #f4f4f4;
  font-family: Microsoft Yahei;
  font-size: 30px;
  position: relative;
}

.set {
  position: relative;
}
.loading {
  position: fixed !important;
  top: calc(50%);
  left: calc(50%);
  transform: translate(-50%, -50%);
}
/*暂无*/
.zan-box {
  width: 100%;
  text-align: center;
  margin-top: 40%;
  float: left;
}
.zan-img {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.zan-text {
  display: block;
  text-align: center;
  color: #b8b8b8;
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
}
.set-box {
  width: 100%;
  float: left;
  background: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.set-box1 {
  width: 100%;
  float: left;
  border-bottom: 1px #ededed solid;
  padding: 35px 0px;
}
.picker {
  height: 30px;
  line-height: 30px;
  margin-left: 50px;
}
.set-tex1 {
  display: block;
  height: 30px;
  line-height: 50px;
  color: #333;
  float: left;
  margin-right: 15rpx;
  width: 250px;
  text-align: left;
}
.set-inp {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  margin-left: 10px;
  float: left;
  color: #000;
  width: 360rpx;
}
.set-add {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  display: block;
  float: left;
}
.set-textarea {
  border: 1px #ededed solid;
  border-radius: 5px;
  float: left;
  width: 100%;
  box-sizing: border-box;
  height: 80px;
  padding: 20px;
  margin: 8px 0;
  color: #666;
}
.set-btn {
  width: 90%;
  margin: 0 5%;
  height: 60px;
  line-height: 60px;
  background: #056ba7;
  color: #fff;
  font-size: 40px;
  margin-top: 30px;
  /* float: left; */
  margin-bottom: 100px;
}
.set-radio {
  height: 30px;
  line-height: 30px;
  color: #666;
}
.set-radio radio {
  transform: scale(0.8);
}
</style>